<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/12/3
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>花礼网后台管理系统-商品列表</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="css/Top.css">
    <link rel="stylesheet" href="css/Left.css">
    <link rel="stylesheet" href="css/commodityList.css">
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }


        .fileimg{
            width: 150px;
            height: 150px;
            opacity: 0;
            z-index: 20;
            position: absolute;
            top: 0px;
        }
        .fileimgclass{
            border: 1px solid black;
            width: 150px;
            height: 150px;
            position: relative;
            font-size: 140px;
            text-align: center;
            line-height: 150px;
            color: #00000090;
        }

        .fileBox{
            /*border: 1px solid red;*/
            width: 100%;
        }
        .fileBox:after{
            content: "";
            display: block;
            clear: both;
        }
        .fileBox>*{
            margin-right: 5px;
            float: left;
        }


    </style>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2 stick"><%@include file="Left.jsp"%></div>
        <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
        <div class="col-md-10 col-md-offset-2">
            <c:set value="${requestScope.comdetails}" var="g"></c:set>
            <form class="form-horizontal" action="manager/updateCommodityServlet.shtml" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品编号</label>
                    <div class="col-sm-10">
                        <input type="text" name="id" class="form-control" value="${g.id}" readonly="readonly">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品名称</label>
                    <div class="col-sm-10">
                        <input type="text" name="comName" class="form-control" value="${g.comName}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品描述1</label>
                    <div class="col-sm-10">
                        <input type="text" name="content" class="form-control" value="${g.content}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品描述2</label>
                    <div class="col-sm-10">
                        <input type="text"name="content2" class="form-control" value="${g.content2}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">已售数量</label>
                    <div class="col-sm-10">
                        <input type="text" name="outNum" class="form-control" value="${g.outNum}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">售价</label>
                    <div class="col-sm-10">
                        <input type="text" name="outPrice" class="form-control" value="${g.outPrice}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">市场价</label>
                    <div class="col-sm-10">
                        <input type="text" name="marketPrice" class="form-control" value="${g.marketPrice}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">材料</label>
                    <div class="col-sm-10">
                        <input type="text" name="materialScience" class="form-control" value="${g.materialScience}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">包装</label>
                    <div class="col-sm-10">
                        <input type="text" name="packing" class="form-control" value="${g.packing}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">配送说明</label>
                    <div class="col-sm-10">
                        <input type="text" name="distribution" class="form-control" value="${g.distribution}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品图片</label>
                    <div class="col-sm-10">
                        <c:forEach items="${g.images}" var="img">
                            <input type="hidden" name="comImages" value="${img}">
                            <img src="image/commodity/${img}" alt="" height="150px">
                        </c:forEach>

                        <div class="fileBox">
                            <div class="fileimgclass">+
                                <input type="file" name="comImage" class="fileimg" multiple style="float: left">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">详情图片</label>
                    <div class="col-sm-10">
                        <c:forEach items="${g.images2}" var="img2">
                            <input type="hidden" name="detailsImages" value="${img2}">
                            <img src="image/commodity/${img2}" alt="" height="150px">
                        </c:forEach>
                        <div class="fileBox">
                            <div class="fileimgclass">+
                                <input type="file" name="detailsImage" class="fileimg" multiple style="float: left">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品版本</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="comShowId">
                            <option value="0">默认</option>
                            <c:forEach items="${requestScope.commodityDetailsList}" var="cc">
                                <option value="${cc.id}">${cc.id} ：${cc.comName}</option>
                            </c:forEach>
                        </select>
<%--                        <input type="text" name="comShowId" class="form-control" value="${g.comShowId}">--%>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">类别</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="classId" id="class">
                            <option value="" disabled>《《《一级菜单》》》</option>
                            <c:forEach items="${requestScope.classList}" var="c">
                                <c:if test="${c.type==1}">
                                    <option value="${c.id}">${c.name}</option>
                                </c:if>
                            </c:forEach>
                            <option value="" disabled>《《《二级菜单》》》</option>
                            <c:forEach items="${requestScope.classList}" var="c">
                                <c:if test="${c.type==2}">
                                    <option value="${c.id}">${c.name}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">库存</label>
                    <div class="col-sm-10">
                        <input type="text" name="stockd" class="form-control" value="${g.stockd}">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <a href="manager/commodityListServlet?pageNo=${requestScope.pageNo}"><button type="button" class="btn btn-default">取消</button></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(function (){
        $("[name='comShowId']").val(${g.comShowId})

        //左侧用户列表变红
        $("#ul li:nth-child(3) a").css("color","red");
        $("#let").html("商品列表");

        $("#class").val(${g.classId});

        $('.fileimg').change(function(e){

            $(this).parent().parent().children("img").remove();

            let fileMsg = e.currentTarget.files;
            for (let i = 0; i < fileMsg.length; i++) {
                let fileName = fileMsg[i].name;
                //类型
                let fileType = fileMsg[i].type;
                console.log(fileType);
                // 判断文件类型
                let type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
                console.log(type);
                if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
                    alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
                    return false;
                }
                let img = $("<img id='im' src='' alt='' style='width: 150px;height: 150px;float: left'>");
                $(img).attr("src","image/commodity/"+fileName);
                $(this).parent().parent().append(img);
            }


        })









    })
</script>
</html>
